<template>
  <div class="item-list">
    <draggable :list="form.choices" handle=".move" animation="150" v-if="form.choices && form.choices.length > 0">
      <div class="item" v-for="(item, index) in form.choices" :key="item.key">
        <i class="move el-icon-rank" style="float: left; cursor: move"></i>
        <el-input
          class="content"
          v-model.trim="item.value"
          placeholder="请输入下拉框内容"
          :maxlength="50"
          show-word-limit
          :disabled="form.category === 'system'"
          @change="itemChange(item, index)"
          @input="inputValue(item)"
        ></el-input>
        <div class="operate">
          <el-radio
            v-model="isDefault"
            :label="item.key"
            style="margin-right: 0px"
            @change="changeDefault"
            :disabled="form.category === 'system'"
            >默认</el-radio
          >
          <i v-if="!(form.category === 'system')" class="el-icon-delete" @click="remove(index)"></i>
        </div>
      </div>
    </draggable>
    <div v-if="!(form.category === 'system')" @click="add" class="add-btn"><i class="el-icon-plus" />添加选项</div>
  </div>
</template>
<script>
import * as uuid from 'uuid'
import draggable from 'vuedraggable'
export default {
  name: 'selectComp',
  data() {
    return {
      isDefault: ''
    }
  },
  components: {
    draggable
  },
  props: {
    form: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  methods: {
    getData() {
      const realGroup = this.form.choices && this.form.choices.filter((v) => v.value !== '')
      if (realGroup && realGroup.length) {
        realGroup.map((item) => {
          if (item.key === this.isDefault) {
            item.isDefault = true
          } else {
            item.isDefault = false
          }
        })
      }
      return realGroup
    },
    changeDefault(idx) {
      this.form.choices = this.getData()
      this.$emit('onItemChange', this.form.choices)
    },
    inputValue (row) {
      if (!row.value) {
        this.changeDefault()
      }
    },
    // 校验选项是否存在
    itemChange(row, idx) {
      this.form.choices.forEach((item, i) => {
        if (idx !== i && row.value && row.value === item.value) {
          this.$message.error('选项已存在')
          let obj = this.form.choices[idx]
          obj.value = ''
          this.$set(this.form.choices, idx, obj)
        }
      })
    },
    add() {
      this.form.choices.push({
        isDefault: false,
        value: '',
        key: uuid.v1().replace(/-/g, '')
      })
    },
    setData(isDefault) {
      debugger
      this.isDefault = isDefault && isDefault.length ? isDefault[0].key : ''
    },
    remove(index) {
      this.form.choices.splice(index, 1)
      this.$emit('onItemChange', this.form.choices)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import "../../../../../assets/common.styl"
.item-list
  border-radius 4px
  overflow hidden
  background #fafafa
  padding 16px
  .el-icon-rank
    color: rgba(0,0,0,0.38);
    padding-top: 9px;
    font-size: 20px;
  .item
    line-height 32px
    overflow hidden
    margin-bottom 16px
    .content
      width calc(100% - 133px)
      float left
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      margin-left 16px
    .operate
      float right
      line-height 32px
      :deep(.el-radio__inner)
        border-color rgba(0, 0, 0, 0.38)
      :deep(.el-radio__input.is-checked .el-radio__inner)
        border-color $c-main
      i
        color rgba(0, 0, 0, 0.38)
        margin-left 16px
        font-size 16px
        cursor pointer
        &:hover
          color #fc6c5c
  .add-btn
    cursor pointer
    color $c-main
    margin-left 10px
    .el-icon-plus
      margin-right 6px
      color $c-main
</style>
